{extend name="public/base" /}
{block name="css"}
<style>

  .content {
    padding-top: 50px;
  }

  .single-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .multi-2-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid">
  <img alt="" style="width: 100%" src="https://u-res.oss-cn-chengdu.aliyuncs.com/web/UJGC/article/mobile/banner_gsdt.png" />
  <div class="content" style="padding: 20px 15px 0">
    {volist name="list" id="v"}
    <div onclick="window.location.href='{$Request.root}/article/{$v.id}.html'" class="item" style="display: flex;overflow: hidden">
      <img style="width: 8rem;min-width:8rem;min-height:8rem;height:8rem;object-fit: cover" src="{$v.cover}" />
      <div style="display: flex;flex-direction: column;justify-content: space-between;overflow: hidden;">
        <div style="display: flex;flex-direction: column;overflow: hidden;padding-left: 12px">
          <p class="single-text" style="font-size: 16px;color: #000;">{$v.title}</p>
          <p class="multi-2-text" style="line-height: 20px;margin-top: 1rem;font-size: 15px;text-align: left;color: #9A9A9A">{$v.summary}</p>
        </div>
        <div style="width: 100%;padding-left: 10px">
          <span style="background: #1C2957;border-radius: 12px;padding: 2px 4px;width: fit-content;color: #fff;font-size: 12px">{$v.tag}</span>
        </div>
      </div>
    </div>
    <hr style="margin: 20px 0;border: 0;height: 1px;background: #ccc">
    {/volist}
  </div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/echo/1.4.0/echo.js" /}
<script>
  $('#nav').find('ul > li').eq(7).addClass('nav-active');
  $("#nav").scrollLeft(65*7);

    Echo.init({
        offset: 0,
        throttle: 0
    });
</script>
{/block}